<template>
    <div class="M-toast" v-show="show">
        <div class="mask"></div>
        <div class="con">{{ text }}</div>
    </div>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        text: {
            type: String,
            default: "",
        },
        delay: {
            type: Number,
            default: 1500
        }
    },
    methods: {
        toggleStatus() {
            // 值变化中，变化中触发的 watch 不予处理
            this.$emit('update:show', !this.show);
        },
        fade() {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.toggleStatus();
                this.timer = null;
            }, this.delay);
        },
    },
    created: function () {
        this.timer = null;
    },
    mounted: function () {
        if (this.show) {
            this.fade();
        }
    },
    watch: {
        show: function (nval, oval) {
            if (nval && nval != oval) {
                clearTimeout(this.timer);
                this.fade();
            }
        }
    }
};
</script>
<style lang="less">
.M-toast {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 15;
    .mask {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
    }
    .con {
        position: absolute;
        left: 50%;
        top: 50%;
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        transform: translate(-50%, -50%);
    }
}
</style>